<!--
 * @Author: your name
 * @Date: 2021-04-02 17:27:33
 * @LastEditTime: 2021-06-01 20:11:14
 * @LastEditors: Please set LastEditors
 * @Description: 药企资讯banner
 * @FilePath: /medicine-web/src/views/realinfo/components/infoBanner.vue
-->
<template>
  <div class="info-banner-container">
    <div class="main-banner">
    </div>
    <div class="main-banner__search" v-if="routerList.indexOf($route.path) == -1">
      <div class="main-banner__content">
        <a-row style="margin-bottom: 13px;">
          <a-col :span="24">
            <ul class="tumor-types-pattern" style="height: 30px;">
              <li class="font-pattern-4">搜索范围：</li>
              <div class="tumor-types-pattern">
                <li v-for="item in selection" :key="item.name">
                  <customTag style="margin-right: 12px; margin-top: 12px;" v-if="item.children.length > 0" :contentType="item.name" :contentStr="`${item.name}：${formatTumor(item.children)}`" @close="handleClose"></customTag>
                </li>
              </div>
            </ul>
          </a-col>
        </a-row>
        <a-row type="flex" align="middle" justify="space-between">
          <a-col :span="11">
            <a-input v-model="ruleForm.keywords" placeholder="请输入您想搜索的内容" style="height: 43px; font-size: 13px;" />
          </a-col>
          <a-col :span="5">
            <a-row>
              <a-col :span="10">
                <customInputSelect v-model="ruleForm.time_min" :optionsSelection="optionsSelectionList" :placeholderStr="'起始年'"></customInputSelect>
              </a-col>
              <a-col :span="4">
                <span style="width: 100%; height: 43px; display: inline-block; line-height: 43px; text-align: center;">~</span>
              </a-col>
              <a-col :span="10">
                <customInputSelect v-model="ruleForm.time_max" :optionsSelection="optionsSelectionList" :placeholderStr="'结束年'"></customInputSelect>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="3" class="main-banner__content-center">
            <a-checkbox-group @change="onChange">
              <a-row>
                <a-col :span="24">
                  <a-checkbox value="安柯瑞">
                    <span class="main-banner__text">安柯瑞</span>
                  </a-checkbox>
                </a-col>
                <!-- <a-col :span="24">
                  <a-checkbox value="安全性数据">
                    <span class="main-banner__text">安全性数据</span>
                  </a-checkbox>
                </a-col> -->
              </a-row>
            </a-checkbox-group>
          </a-col>
          <a-col :span="4">
            <a-button class="btn-pattern" style="height: 39px; width: 100%" @click.stop="search">
              <img :src="require('@/assets/image/search1.png')" alt="" srcset="" style="width: 23px; height: 23px; margin-right: 14px">
              搜 索
            </a-button>
          </a-col>
        </a-row>
        <a-row style="margin-top: 14px;">
          <a-col :span="24">
            <ul class="tumor-types-pattern">
              <li class="font-pattern-4">肿瘤类型：</li>
              <li @click.stop="handleSelection(item, '肿瘤类型')" v-for="item in tumorType" :key="item.name" :class="{ 'font-pattern-4': true, 'font-pattern-4__active': item.isSelected, 'font-pattern-4__deactive': !item.isSelected }" style="margin-left: 16px; cursor: pointer;">{{item.name}}</li>
            </ul>
          </a-col>
        </a-row>
        <a-row style="margin-top: 9px;">
          <a-col :span="24">
            <ul class="tumor-types-pattern">
              <li class="font-pattern-4">溶瘤病毒类型：</li>
              <li @click.stop="handleSelection(item, '溶瘤病毒类型')" v-for="item in oncolyticVirusType" :key="item.name" :class="{ 'font-pattern-4': true, 'font-pattern-4__active': item.isSelected, 'font-pattern-4__deactive': !item.isSelected }" style="margin-left: 16px; cursor: pointer;">{{item.name}}</li>
            </ul>
          </a-col>
        </a-row>
        <a-row style="margin-top: 8px;">
          <a-col :span="24">
            <ul class="tumor-types-pattern">
              <li class="font-pattern-4">公司选择：</li>
              <li>
                <a-checkbox-group @change="onChangeCompany">
                  <a-checkbox value="国内">
                    <span class="font-pattern-4">国内</span>
                  </a-checkbox>
                  <a-checkbox value="国外">
                    <span class="font-pattern-4">国外</span>
                  </a-checkbox>
                </a-checkbox-group>
              </li>
            </ul>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="nav-to-statistics" v-if="routerList.indexOf($route.path) == -1">
      <customBtn :btnStr="'数据统计'" @handClick="handleStatistics"></customBtn>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import customBtn from '@/components/CustomBtn/index'
import customSelect from '@/components/CustomSelect/index.vue'
import customInput from '@/components/CustomInput/index.vue'
import customTag from '@/components/CustomTag/index.vue'
import customInputSelect from '@/components/CustomInputSelect/index'
import { arrayToSplitStr, splitStrToArray, yearPeriod } from '@/utils/index'
import { mapGetters } from 'vuex'
export default {
  name: 'infoBanner',
  components: { customSelect, customInput, customTag, customBtn, customInputSelect },
  data () {
    return {
      optionsSelectionList: yearPeriod(),
      // optionsSelectionListMin: yearPeriod(),
      // optionsSelectionListMax: [],
      routerList: ['/realinfo/card', '/realinfo/statistics'], // 在此路由中的名单， 都不会出现筛选界面
      ruleForm: {
        keywords: '',
        time_min: null,
        time_max: null,
      },
      // 肿瘤类型
      tumorType: [],
      // 溶瘤病毒类型
      oncolyticVirusType: [],
      // 搜索范围
      selection: [
        { name: '肿瘤类型', children: [] },
        { name: '溶瘤病毒类型', children: [] }
      ],
    }
  },
  methods: {
    handleStatistics () {
      this.$router.push('/realinfo/statistics')
    },
    formatTumor (rawArray) {
      let temp = ''
      if (rawArray && rawArray.length > 0) {
        for (const item of rawArray) {
          temp += rawArray.indexOf(item) == rawArray.length - 1 ? item.name + '' :  item.name + '、'
        }
      }
      return temp
    },
    handleMenuClick (e) {
      console.log('handleMenuClick', e)
      this.tabName = e.key
    },
    onChange (checkList) {
      if (checkList.includes('安柯瑞')) {
        this.ruleForm.is_oncorine = 1
      }
      if (!checkList.includes('安柯瑞')) {
        this.ruleForm.is_oncorine = 0
      }
    },
    handleClose (typeStr) {
      console.log('handleClose', typeStr)
      for (let item of this.selection) {
        if (item.name === typeStr) {
          item.children = []
        }
      }
      if (typeStr === '肿瘤类型') {
        for (let item of this.tumorType) {
          item.isSelected = false
        }
        this.ruleForm.tumor_type = arrayToSplitStr(this.selection[0].children, 'name')
      } else {
        for (let item of this.oncolyticVirusType) {
          item.isSelected = false
        }
        this.ruleForm.virus_type = arrayToSplitStr(this.selection[1].children, 'name')
      }
    },
    handleSelection (raw, type) {
      if (type === '肿瘤类型') { // 肿瘤类型
        raw.isSelected = !raw.isSelected
        if (raw.isSelected) {
          this.selection[0].children.push({ name: raw.name })
        } else {
          this.selection[0].children = this.selection[0].children.filter(item => item.name != raw.name)
        }
        this.ruleForm.tumor_type = arrayToSplitStr(this.selection[0].children, 'name')
      } else { // 溶瘤病毒类型
        raw.isSelected = !raw.isSelected
        if (raw.isSelected) {
          this.selection[1].children.push({ name: raw.name })
        } else {
          this.selection[1].children = this.selection[1].children.filter(item => item.name != raw.name)
        }
        this.ruleForm.virus_type = arrayToSplitStr(this.selection[1].children, 'name')
      }
    },
    onChangeCompany (checkList) {
      console.log('onChangeCompany', checkList)
      this.ruleForm.type = ''
      for (const item of checkList) {
        this.ruleForm.type += checkList.indexOf(item) == checkList.length - 1 ? item : item + ';'
      }
    },
    initDict () {
      const dicts = JSON.parse(this.getLocalStorage('dicts'))
      // 肿瘤类型
      this.tumorType = dicts && dicts.tumorType ? dicts.tumorType.subs.map(item => {
        return {
          id: item.id,
          name: item.name,
          isSelected: false
        }
      }) : []
      // 溶瘤病毒
      this.oncolyticVirusType = dicts && dicts.oncolyticVirusType ? dicts.oncolyticVirusType.subs.map(item => {
        return {
          id: item.id,
          name: item.name,
          isSelected: false
        }
      }) : []
    },
    search () {
      for (const item in this.ruleForm) {
        if (!this.ruleForm[item] && this.ruleForm[item] != 0) {
          delete this.ruleForm[item]
        }
      }
      console.log('this.ruleForm search', this.ruleForm)
      let params = JSON.parse(JSON.stringify(this.ruleForm))
      params.isInit = false
      this.$action('setFilter', params)
    },
    keyUpFun (event) {
      var event=document.all? window.event : event
  　　 if((event.keyCode || event.which) == 13) {
  　　　 this.search()
  　　 }
    }
  },
  mounted () {
    this.initDict()
    if (this.filterMap && this.filterMap.tumor_type) {
      this.ruleForm.tumor_type = this.filterMap.tumor_type
      const tumor_type = splitStrToArray(this.filterMap.tumor_type)
      for (const item of tumor_type) {
        this.selection[0].children.push({ name: item })
        for (let o of this.tumorType) {
          if (o.name == item) {
            o.isSelected = true
          }
        }
      } 
    }
    if (this.filterMap && this.filterMap.virus_type) {
      this.ruleForm.virus_type = this.filterMap.virus_type
      const virus_type = splitStrToArray(this.filterMap.virus_type)
      for (const item of virus_type) {
        this.selection[1].children.push({ name: item })
        for (let o of this.oncolyticVirusType) {
          if (o.name == item) {
            o.isSelected = true
          }
        }
      }
    }
    if (this.filterMap && this.filterMap.keywords) {
      this.ruleForm.keywords = this.filterMap.keywords
    }
    document.body.addEventListener('keyup', this.keyUpFun, false)
  },
  watch: {
    'ruleForm.keywords': function (val, oldVal) {
      this.$action('setSearchValue', val)
    },
    // 'ruleForm.time_min': function (val, oldVal) {
    //   this.optionsSelectionListMax = yearPeriod(val)
    //   this.$nextTick(() => {
    //     this.ruleForm.time_max = null
    //   })
    // }
  },
  computed: {
    ...mapGetters({
      filterMap: 'filterMap'
    })
  },
  beforeDestroy () {
    this.$action('setFilter', {})
    this.$action('setSearchValue', '')
    document.body.removeEventListener('keyup', this.keyUpFun, false)
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.main-banner {
  width: 100%;
  height: 337px;
  background-image: url('./../../../assets/image/banner3.png');
  background-repeat: no-repeat;
  background-size: 123% 100%;
}
.main-banner__search {
  height: 200px;
  position: relative;
  .main-banner__content {
    position: absolute;
    width: 1200px;
    // height: 256px;
    z-index: 2;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.21);
    background-color: #fff;
    border-radius: 5px;
    padding: 26px 32px;
    @include flex-def;
    @include flex-zTopBottom;
    @include flex-zBetween;
    .main-banner__content-center {
      @include flex-def;
      @include flex-zCenter;
      /deep/ .main-banner__text {
        font-size: 13px;
        color: #555;
        font-weight: 400;
      }
    }
    .btn-pattern {
      width: 100%;
      height: 100%;
      font-size: 13px;
      word-spacing: 10px;
      background-color: #1ADBB6;
      border: none;
      border-radius: 4px;
      color: #fff;
    }
    .tumor-types-pattern {
      @include flex-def;
      @include flex-cCenter;
      padding: 0;
      margin: 0;
    }
    .tumor-types-pattern__top {
      @include flex-def;
      @include flex-cStart;
      padding: 0;
      margin: 0;
    }
  }
}
</style>

